import React, { useEffect } from "react";
import { Form, Row, Col, Tabs, Input, Image } from "antd";
import language from "@/locales/zh_cn";

const { TabPane } = Tabs;

interface Props {
  task: any;
  file: any;
  threed_file: any;
}

const OrderDetail: React.FC<Props> = ({
  task, file, threed_file
}) => {
  const [form] = Form.useForm();

  useEffect(() => {
    if (task) {
      form.setFieldsValue(task);
    }
  }, [task])

  return (
    <div className="order-detail flex p-3">
      <div style={{ width: 200, height: 180 }}>
        <Tabs defaultActiveKey="img" size="middle" className="img-tabs">
          <TabPane tab="2D" key="img">
            <Image
              width={190}
              height={130}
              src={file}
              style={{ objectFit: 'contain', background: '#f5f5f5' }}
              fallback="https://via.placeholder.com/190x130?text=No+Image"
              alt="2D图片"
            />
          </TabPane>
          {threed_file && (
            <TabPane tab="3D" key="threed">
              <iframe
                src={threed_file}
                width={190}
                height={130}
                style={{ border: 0 }}
                title="3D预览"
              />
            </TabPane>
          )}
        </Tabs>
      </div>
      <div className="flex-1 ml-4">
        <div className="form pl-4">
          <Form form={form} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} layout="horizontal">
            <Row gutter={[16, 8]}>
              <Col span={8}>
                <Form.Item label={language.batch_num} name="batch_order_num">
                  <Input readOnly />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label={language.work_order_num} name="work_order_num">
                  <Input readOnly />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label={language.product_name} name="product_name">
                  <Input readOnly />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label={language.product_encode} name="product_encode">
                  <Input readOnly />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label={language.product_specs} name="product_specs">
                  <Input readOnly />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label={language.product_model} name="product_model">
                  <Input readOnly />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="工艺:" name="process_name">
                  <Input readOnly />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="工序:" name="mbom_num">
                  <Input readOnly />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label={`${language.plan_start_time}：`} name="aps_start">
                  <Input readOnly />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label={`${language.plan_end_time}：`} name="aps_end">
                  <Input readOnly />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="任务数量:" name="quantity">
                  <Input readOnly />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="完成工量:" name="work_quantity">
                  <Input readOnly />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </div>
      </div>
    </div>
  );
}

export default OrderDetail;
